<template>
    <div class="wholeContainer">
        <div class="userContainer">
            <div v-for="(item,index) in attentionList" :key="index" class="userItem" @click="goDetail(item.userId)">
                <img :src="item.picUrl">
                <div class="userName">{{item.nickname}}</div>
            </div>
        </div>
        <div v-if="!attentionList.length" class="showInfo">
            暂无关注，快去浏览论坛吧！
        </div>
    </div>
</template>

<script>
import identicon from 'identicon.js'
export default {
    name:'MyAttention',
    data(){
        return {
            attentionList:[]
        }
    },
    mounted(){
        this.$axios({
            method:'get',
            url:`/api/attentions/${localStorage.getItem('userId')}`,
            headers:{
                'Content-Type':'application/json',
                'token':localStorage.getItem('token')
            }
        }).then(res=>{
            // console.log(res)
            if(res.data.code){
                for(let i=0;i<res.data.data.length;i++){
                    this.$axios({
                        method:'get',
                        url:`/api/users/${res.data.data[i].focusedId}`,
                        headers:{
                            'Content-Type':'application/json',
                            'token':localStorage.getItem('token')
                        }
                    }).then(res1=>{
                        console.log(res1)
                        if(res1.data.code){
                            
                            if(!res1.data.data.picUrl){
                                res1.data.data.picUrl = 'data:image/png;base64,'+new identicon(this.md5(res1.data.data.nickname), 200).toString()
                            }
                            this.attentionList.push(res1.data.data)
                        }
                        
                    })
                }
            }
        })
        this.$forceUpdate()
    },
    methods:{
        goDetail(userId){
            this.$router.push({
                name:'userInfo',
                query:{
                    userId:userId
                }
            })
        }
    }
}
</script>

<style scoped>
    .wholeContainer{
        width: 100%;
        height: 100%;
    }
    .userContainer{
        margin-top: 20px;
        width: 80%;
        margin-left: 10%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .userItem{
        width:10%;
        margin:1% 3.33%;
        text-align: center;

    }
    .userItem img{
        width:100%;
        border-radius: 100px;
    }
    .userName{
        font-size: 16px;
        margin-top: 5px;
        color: white;
    }
    .userItem:hover{
        cursor: pointer;
        background-color: gray;
    }
    .showInfo{
        width:100%;
        height:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:20px;
        color:#fff;
        margin-top: 50px;
    }
    .showInfo{
        width:100%;
        height:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:20px;
        color:#fff;
        margin-top: 50px;
    }
</style>